// 导入 ESLint 核心配置工具，规范配置结构
import { defineConfig } from 'eslint/config';
// 导入全局变量定义，支持浏览器（window）和 Node（process）环境全局变量
import globals from 'globals';
// 导入 ESLint 官方 JS 规则插件，提供基础 JavaScript 语法校验规则
import pluginJs from '@eslint/js';
// 导入 Vue 专用规则插件，校验 Vue 语法（如指令、组件）和最佳实践
import pluginVue from 'eslint-plugin-vue';
// 导入 TypeScript-ESLint 工具集，包含 TS 语法解析器和 TS 专用规则
import tseslint from 'typescript-eslint';
// 导入 Vue 单文件解析器，拆解 .vue 的 template/script/style 结构
import vueEslintParser from 'vue-eslint-parser';
// 导入 Prettier 插件，将 Prettier 格式化规则集成到 ESLint
import prettierPlugin from 'eslint-plugin-prettier';
// 导入 Prettier 兼容配置，关闭 ESLint 与 Prettier 冲突的规则
import prettierConfig from 'eslint-config-prettier';

// 导出完整 ESLint 配置
export default defineConfig([
  // 配置 1：处理 .js 和 .ts 文件（非 Vue 单文件）
  {
    files: ['**/*.{js,ts}'], // 作用范围：所有 JS/TS 文件
    languageOptions: {
      globals: { ...globals.browser, ...globals.node }, // 声明支持的全局变量
      ecmaVersion: 'latest', // 支持最新 ES 语法（如可选链、空合并）
      sourceType: 'module', // 使用 ES 模块规范（import/export）
      parser: tseslint.parser, // 用 TS 解析器处理 JS/TS 语法
    },
    plugins: {
      '@typescript-eslint': tseslint.plugin, // 注册 TS 规则插件
    },
  },

  // 配置 2：处理 .vue 单文件组件
  {
    files: ['**/*.vue'], // 作用范围：所有 Vue 文件
    languageOptions: {
      globals: {
        ...globals.browser,
        ...globals.node,
        // 声明自动导入的全局 API（避免 no-undef 错误）
        ref: 'readonly', // Vue 的响应式变量 API
        reactive: 'readonly', // Vue 的响应式对象 API
        ElMessage: 'readonly', // Element Plus 的消息提示组件
        // 其他自动导入的 API 需在此处声明（如 computed、ElLoading 等）
      }, // 同配置 1 的全局变量
      ecmaVersion: 'latest',
      sourceType: 'module',
      parser: vueEslintParser, // 主解析器：处理 .vue 整体结构
      parserOptions: {
        parser: tseslint.parser, // 嵌套解析器：处理 <script lang="ts"> 中的 TS 语法
        vueFeatures: { template: true, script: true }, // 启用模板和脚本解析
      },
    },
    plugins: {
      vue: pluginVue, // 注册 Vue 规则插件
    },
  },

  // 配置 3：继承官方推荐规则（基础校验能力）
  pluginJs.configs.recommended, // ESLint 官方 JS 推荐规则
  ...tseslint.configs.recommended, // TypeScript 推荐规则（展开数组格式）
  pluginVue.configs['flat/essential'], // Vue 基础语法校验（如检测未定义的模板变量）
  pluginVue.configs['flat/recommended'], // Vue 最佳实践（如 v-for 加 key）

  // 配置 4：Prettier 兼容处理（解决 ESLint 与 Prettier 规则冲突）
  prettierConfig, // 关闭冲突规则（如 ESLint 的缩进规则 vs Prettier 的缩进规则）

  // 配置 5：集成 Prettier 格式化（将 Prettier 错误视为 ESLint 错误）
  {
    files: ['**/*.{js,ts,vue,css,scss,md}'], // 作用范围：需格式化的所有文件类型
    plugins: {
      prettier: prettierPlugin, // 注册 Prettier 插件
    },
    rules: {
      'prettier/prettier': 'error', // Prettier 格式化错误标记为 ESLint 错误
      indent: 'off', // 关闭 ESLint 自带缩进规则，交给 Prettier
      quotes: 'off', // 关闭 ESLint 引号规则，交给 Prettier
      semi: 'off', // 关闭 ESLint 分号规则，交给 Prettier
    },
  },

  // 配置 6：自定义规则（覆盖官方/插件规则，优先级最高）
  {
    files: ['**/*.{js,ts,vue}'], // 作用范围：核心代码文件
    rules: {
      // 基础 JS 规则
      'no-var': 'error', // 禁止使用 var 声明变量
      'no-multiple-empty-lines': ['warn', { max: 1 }], // 最多允许 1 个连续空行
      'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', // 生产环境禁止 console
      'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', // 生产环境禁止 debugger
      'no-unexpected-multiline': 'error', // 禁止换行导致的语法错误（如 if 后未加括号）
      'no-useless-escape': 'off', // 允许不必要的转义字符（如单引号内的 \'）

      // TypeScript 规则
      // 配置未使用变量规则：允许下划线开头的变量暂不使用
      '@typescript-eslint/no-unused-vars': [
        'error',
        {
          varsIgnorePattern: '^_', // 匹配以下划线开头的变量并忽略其未使用错误
        },
      ],
      '@typescript-eslint/prefer-ts-expect-error': 'error', // 优先用 @ts-expect-error 替代 @ts-ignore
      '@typescript-eslint/no-explicit-any': 'off', // 允许显式使用 any 类型
      '@typescript-eslint/no-non-null-assertion': 'off', // 允许非空断言（! 操作符）
      '@typescript-eslint/no-namespace': 'off', // 允许使用 TS namespace
      '@typescript-eslint/semi': 'off', // 不强制 TS 代码分号结尾

      // Vue 规则
      'vue/valid-template-root': 'off', // 允许 Vue 模板多根节点（Vue 3 特性）
      'vue/multi-word-component-names': 'off', // 允许单单词组件名（如 Button）
      'vue/no-mutating-props': 'error', // 禁止直接修改 Vue 组件的 props
      'vue/attribute-hyphenation': 'off', // 允许 Vue 属性用 camelCase（如 :isActive）
    },
  },
]);
